﻿@model ThirdPrize.Models.ComicModel

@{
    ViewBag.Title = "Comics";
}


<div id="fb-root"></div>
<script> (function (d, s, id) {
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) return;
     js = d.createElement(s);
     js.id = id;
     js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&appId=363277123815804&version=v2.0";
     fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk')); </script>

<article class="comic">

    <map name="navMap">
        @if (!Model.isFirst)
        {
            <area shape="rect" coords="0,0,50,@Model.ImageHeighth" href="showcomic?comicno=@(Model.CurrentEpisode - 1)" alt ="Previous Comic" />
        }
        @if (!Model.isLast)
        {
            <area shape="rect" coords="@(Model.ImageWidth - 50),0,@(Model.ImageWidth),@Model.ImageHeighth" href="showcomic?comicno=@(Model.CurrentEpisode + 1)" alt="Next Comic" />
        }
    </map>
    <table class="nurb-table">
        <tr>
            <td colspan="3" class="tab-left">
                <img src="~/Images/Nurbs/NurbsLogo.png" />
            </td>
            <td colspan="3" class="tab-right">
                @if (User.IsInRole("Administrator"))
                {
                    <a href="/Nurbs/ComicList">Manage Comic Episodes</a>
                }
            </td>
        </tr>
        <tr>
            <td colspan="1" class="tab-left">@Html.ActionLink("Latest", "Index", "Nurbs")</td>
            <td colspan="2" class="tab-center">@Html.ActionLink("About", "About", "Nurbs")</td>
            <td colspan="2" class="tab-center">@Html.ActionLink("Archive", "Archive", "Nurbs")</td>
            <td colspan="1" class="tab-right"><a href="~/NurbsFeed.XML">Rss Feed</a></td>
        </tr>

        <tr>
            <td class="tab-center" colspan="6">
                <h3>@Model.Title</h3>
            </td>
        </tr>
        <tr>
            <td colspan="6">
                @for (var f = 1; f <= Model.NoPanels; f++)
                {
                    <p>
                        <img usemap="navMap" class="main-cartoon" title="@Model.AltText" src="@String.Format("../images/nurbs/{0}-{1}.{2}", Model.CurrentEpisode, f, Model.ImageSuffix)">
                    </p>
                }
            </td>
        </tr>
        <tr>
            @if (Model.isFirst)
            {
                <td colspan="1" class="tab-left">First</td>
            }
            else
            {
                <td colspan="1" class="tab-left">@Html.ActionLink("<<< First", "ShowComic", "Nurbs", new { comicNo = 1 }, null)</td>
            }
            <td class="tab-center">Current Story</td>
            @if (Model.CurrentEpisode > 1)
            {
                <td colspan="1" class="tab-left">@Html.ActionLink("<< Previous", "ShowComic", "Nurbs", new { comicNo = Model.CurrentEpisode - 1 }, null)</td>
            }
            else
            {
                <td colspan="1" class="tab-left">Previous</td>
            }

            @{
                var r = new Random();
            }
            <td colspan="1" class="tab-center">@Html.ActionLink("Random", "ShowComic", "Nurbs", new { comicNo = r.Next(Model.LastComic) + 1 }, null)</td>
            @if (!Model.isLast)
            {
                <td colspan="1" class="tab-right">@Html.ActionLink("Next >", "ShowComic", "Nurbs", new { comicNo = Model.CurrentEpisode + 1 }, null)</td>
            }
            else
            {
                <td colspan="1" class="tab-right">Next</td>
            }
            @if (Model.isLast)
            {
                <td colspan="1" class="tab-right">Last</td>
            }
            else
            {
                <td colspan="1" class="tab-right">@Html.ActionLink("Last >>>", "ShowComic", "Nurbs", new { comicNo = Model.LastComic }, null)</td>
            }
        </tr>
        <tr>
            <td colspan="6" class="tab-center">
                <h4>Click <a href="ShowComic?comicNo=1">HERE</a> for the very first comic or <a href="ShowComic?comicNo=70">HERE</a> to join it where it restarted.  Hover over the picture for the Alt Text.</h4>
            </td>
        </tr>
        <tr>
            <td colspan="6" class="tab-center">
                <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
                <!-- ComicAds -->
                <ins class="adsbygoogle"
                    style="display: inline-block; width: 728px; height: 90px"
                    data-ad-client="ca-pub-0574130303791064"
                    data-ad-slot="2863558459"></ins>
                <script>
                    (adsbygoogle = window.adsbygoogle || []).push({});
                </script>
            </td>
        </tr>
        <tr>
            <td colspan="6">

                <h3>Published Date</h3>
                @Model.PublishDate.ToShortDateString()
            </td>
        </tr>
        <tr>
            <td colspan="6">
                <h3>My Comments</h3>
                @Html.Raw(@Model.Comment)

            </td>
        </tr>
        <tr>
            <td colspan="6">
                <h3>Reader Comments</h3>
                <div class="fb-comments" data-href= "http://www.thirdprize.org/Nurbs/ShowComic?comicNo=@Model.CurrentEpisode" data-numposts="5" data-colorscheme="light"></div>
            </td>
        </tr>
    </table>
</article>


